@use '../../../core/' as *;

.container {
    display: flex;
    justify-content: space-between;
    margin-bottom: $spacing-size-8;
    gap: $spacing-size-4;
}

.leftColumn,
.rightColumn {
    flex: 1;
}

.leftColumn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: start;
    padding: 0px $spacing-size-12 0px 0px;
}

.rightColumn {
    margin-left: $spacing-size-4;
    display: flex;
    align-items: center;
}

.videoFrame {
    width: 100%;
    height: 300px;
}

.paginationContainer {
    display: flex;
    justify-content: space-around;
}

.videoContainer {
    display: flex;
    overflow-x: scroll !important;
    gap: $spacing-size-4;
}

.video {
    margin-right: $spacing-size-4;
    cursor: pointer;
}

.videoThumbnail {
    object-fit: cover;
    width: 220px;
    height: auto;
}
